<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 <link rel="stylsheet" type="text/css" href='http://wiki.klniox.googlecode.com/git-history/master/gh-pages/stylesheet/colorize.css'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script>
 function myFunction() {
    var x = "Total Width: " + screen.width + "px";
    document.getElementById("body").innerHTML = x;
    }
    </script>
</head>
<body onload="myfonction">

  <div style="border:2px inset #86492fe">
  <div class="containernumb1" style="float:right">
  <h4>profile      sign out</h4>

    <form role="form" style="width:84%;padding-right:76px;">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr" style="width:237px;">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" style="width:237px;">
    </div>
  </form>
  </div>

  <div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
 <h2>Text</h2>
 <p class="text-warning">This paragraph is styled with class "text-warning".</p>    </div>
 <!--   $dir                                -->
 <div>
   <img src='http://www.wallpaperfo.com/thumbnails/detail/20120428/abstract%20nature%20bliss%20vista%20earth%20digital%20art%20pink%20flowers%201280x960%20wallpaper_www.wallpaperfo.com_84.jpg'    width='452' height='129'   style="z-index:10;position:absolute;margin-left:381px;margin-top:-182px;border:1px outside #464681;"/>



</div>


  <div class="containernumb4" style="float:right"><a href='http://www.droidwiki.de/Hauptseite'>exemple de site </a>

  </div>
    <hr/>


    <div style="background-color:#45956e;width:100%;height:12px;margin-left:2px;left:5px;top:184px;"></div>
  <h2>Button Styles</h2>

  <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>   
</div>

    <hr/>
    <div class="row" id="ideo">

      <div class="col-sm-3" id="content" style="height:324px;background-color:orange;">.col-sm-4
      <div style="left:225px;top:2px;">on th econ,tent  div </div>
      <div class="well">Basic Well</div>
        <div class="container"style="color:#8B4513;width:325px;overflow:hidden;font-size:1.2em;"> 
        <h4 style="color:#dc143c;">    différentes musiques populaires     </h4>
 <p>       les différentes musiques populaires sont généralement 

   liées de près ou de loin à un pan du répertoire classique, </p><p>
          même si ces influences sont très rarement revendiquées8. </p><p>
          <p>la musique de jazz est une musique pop</p>
l'utilisation d'un système tonal on ne peut plus conventionnel par des 
          groupes pop tels que Oasis, avec des enchaînements d'accords </p>
      </div> 

        <div style="height:12px;background-color:transparent;"></div>
<div class="alert alert-warning">


      <p class="text-warning"><h4>user storage</h4>

<dt>titre</dt>
  <dd>Documents</dd>
  <dd>images</dd>
  <dd>forum</dd>
  <dd>Contacts</dd>
  <dd>discuss</dd>
       
        </p> 
      </div>

 <div class="alert alert-warning">
       <p class="text-warning"><h4>linguist support </h4>

<dt>language translate</dt>
  <dd>Documents</dd>
  <dd>images</dd>
  <dd>forum</dd>
  <dd>Contacts</dd>
  <dd>discuss</dd>
       
        </p> 
        </div>
     <div class="container" style="left:129px;">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
  </div>



     </div>

      <div class="col-sm-8" id="sidebar" style="height:325px;background-color:lavender">.col-sm-8
      <div style="left:21px;top:3px;">on th econ,tent  div </div>
   <div class="alert alert-warning">
   <strong>Warning!</strong> you indicate a warning that might need attention.
        </div>
        <div style="color:#4533fe;">

          <h3 style="color:#124592;background-color:#5cbf56;">Languages de programmation logiciel</h3>

      <button type="button" class="btn btn-primary" style="background-color:#5e5e5e">  html    L’Hypertext Markup Language </button>
          <h6 style="color:#237944;">
L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web
.</h6> 
<button type="button" class="btn btn-primary" style="background-color:#5e5e5e">stylesheet language de programmation </button> 
<h6 style="color:#237944;">
Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, 
forment un langage informatique qui décrit la présentation des documents HTML et XML. 

          </h6>

<button type="button" class="btn btn-primary" style="background-color:#5e5e5e">javascript</button>
 <h6 style="color:#237944;">
 JavaScript est un langage de programmation de scripts principalement employé dans les pages web 
 interactives mais aussi pour les serveurs2. C’est un langage orienté objet 

          <li>générateurs (instruction yield)</li>
          <li>itérateurs</li>
          <li>définition de tableaux par compréhension (var evens = [i for (i in range(0, 21)) if (i% 2 == 0)];)</li>
          <li>définition de portée locale (instruction let)</li>  
    <div class="alert alert-warning">
   <strong>utilisation d'un language</strong> you indicate a warning that might need attention.
        </div>

          <h3 style="color:#124592;background-color:#5cbf56;">utilitaires de programmation</h3>

          <dd>*  code google</dd>
          <dd>*  github</dd>
          <dd>*  bitbucket</dd>
        </h6>


          <div class="container" style="color:#237944">
<h4 style="color:#237944;">etude classique</h4>
<p>
  l'apport de la musique classique à la musique populaire n'en est pas moins important. Le langage tonal, qu'utilisent l'immense majorité des musiciens de variété a été élaboré au début de la période baroque. En outre, les différentes musiques populaires sont généralement liées de près ou de loin à un pan du répertoire classique, même si ces influences sont très rarement revendiquées8.</p><p>
 
  Pourtant, l'utilisation d'un système tonal on ne peut plus conventionnel par des groupes pop tels que Oasis, avec des enchaînements d'accords et des marches harmoniques dignes de la plus pure tradition classique, ou les influences de compositeurs baroques (Vivaldi et Bach) sur des guitaristes de hard rock ou de heavy metal tels que Eddie Van Halen et Randy Rhoads </p><p>la musique classique a joué une importance majeure dans le rock progressif avec des groupes comme Yes, Genesis et Emerson, Lake and Palmer, aussi considérés comme des groupes de rock symphonique,
  </p>
     
</div>
    </div>

<style>
  dd{ color:#237944;}
</style>




<script>
data = $.response;
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();   

 $("button").click(function(){
        $("div").text($("form").serialize());
        });

// $("h2").siblings().css({"color": "red", "border": "2px solid red"});
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {  
alert( data ); 
// Data returned  
alert( textStatus ); 
// Success  
alert( jqxhr.status ); 
// 200  
alert( "Load was performed." );});
});
</script>

</body>
</html>

